import React from "react";
import { Outlet } from "react-router-dom";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import { Layout, Menu, Button, theme } from "antd";
import CommonAside from "../components/commonAside";
import CommonHeader from "../components/commonHeader";
import CommonTag from "../components/commonTag";
import { UseSelector, useSelector } from "react-redux";
import { RouterAuth } from "../router/routerAuth";
const { Header, Sider, Content } = Layout;
const Main = () => {
  //const [collapsed, setCollapsed] = useState(false);
  // const{
  //   token:{colorBgContainer,borderRadiusLG}
  // }=theme.useToken();
  //获取展开收起的状态
  const collapsed = useSelector((state) => state.tab.isCollapse);
  return (
    <RouterAuth>
      <Layout className="main-container">
        <CommonAside collapsed={collapsed}></CommonAside>
        <Layout className="site-layout">
          <CommonHeader collapsed={collapsed}></CommonHeader>\
          <CommonTag></CommonTag>
          <Content
            className="site-layout-background"
            style={{
              margin: "24px 16px",
              padding: 24,
              minHeight: 280,
            }}
          >
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Layout>
    </RouterAuth>
  );
};
export default Main;
